<template>
  <div class="canvasDrag">
    <canvas ref="can" class="can"></canvas>
  </div>
</template>

<script>
export default {
  name: 'canvasDrag',

  mounted() {
    this.canvas = this.$refs.can;
    this.ctx2d = this.canvas.getContext('2d');

    const img = new Image();
    img.onload = () => {
      const pat = this.ctx2d.createPattern(img, 'no-repeat');
      this.ctx2d.fillStyle = pat;
      this.ctx2d.fillRect(0, 0, 480 + 30, 240 + 30);
    };
    img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=729382916,2146689896&fm=27&gp=0.jpg';
  },

  data() {
    return {
      canvas: null,
      ctx2d: null,
    };
  },
};
</script>

<style lang="postcss" scoped>
.canvasDrag {
  height: 100%;

  & .can {
    width: 100%;
    height: 80%;
    background-color: rgba(0, 0, 0, .2);
  }
}
</style>
